<template>
	<view class="market">
		<!-- form 表单 -->
		<el-form :model="formData" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<!-- 单行输入框 -->
			<el-form-item prop="name" label="策略名称" style="width: 100%;" :rules="[{ required: true, message: '输入框不能为空' }]">
				<el-col :span="9"><el-input v-model="formData.name"></el-input></el-col>
			</el-form-item>

			<!-- 单行输入框 上市区域 -->
			<el-form-item prop="region" label="上市区域" style="width: 100%;" :rules="[{ required: true, message: '输入框不能为空' }]">
				<el-col :span="9"><el-input v-model="formData.region"></el-input></el-col>
			</el-form-item>

			<!-- 时间区间 -->
			<el-form-item label="上市时间" required>
				<el-col :span="9">
					<el-date-picker
						v-model="formData.date"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						format="yyyy 年 MM 月 dd 日"
						value-format="yyyy-MM-dd"
					></el-date-picker>
				</el-col>
			</el-form-item>

			<!-- 区间输入框 -->
			<el-form-item label="前复权价" required>
				<el-col :span="4">
					<el-form-item prop="preUpper"><el-input placeholder="上限" v-model="formData.preUpper"></el-input></el-form-item>
				</el-col>
				<el-col class="line" :span="1">~</el-col>
				<el-col :span="4">
					<el-form-item prop="preLower"><el-input placeholder="下限" v-model="formData.preLower"></el-input></el-form-item>
				</el-col>
			</el-form-item>

			<!-- 涨跌幅 -->
			<el-form-item label="涨跌幅" required>
				<el-col :span="4">
					<el-form-item prop="chgUpper"><el-input placeholder="上限" v-model="formData.chgUpper"></el-input></el-form-item>
				</el-col>
				<el-col class="line" :span="1">~</el-col>
				<el-col :span="4">
					<el-form-item prop="chgLower"><el-input placeholder="下限" v-model="formData.chgLower"></el-input></el-form-item>
				</el-col>
			</el-form-item>

			<!-- 成交额 -->
			<el-form-item label="成交额" required>
				<el-col :span="4">
					<el-form-item prop="chgUpper"><el-input placeholder="上限" v-model="formData.dealUpper"></el-input></el-form-item>
				</el-col>
				<el-col class="line" :span="1">~</el-col>
				<el-col :span="4">
					<el-form-item prop="chgLower"><el-input placeholder="下限" v-model="formData.dealLower"></el-input></el-form-item>
				</el-col>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="send">创建策略</el-button>
				<el-button @click="repeat">重置</el-button>
			</el-form-item>
		</el-form>
	</view>
</template>

<script>
import { sendSell, sendList } from '../../api/api.js';
export default {
	name: 'market',
	data() {
		return {
			formData: {
				name: '',
				region: '',
				date: '',
				preUpper: '',
				proLower: '',
				chgUpper: '',
				chgLower: '',
				dealUpper: '',
				dealLoser: ''
			}
		};
	},
	methods: {
		repeat() {
			this.formData = {
				name: '',
				region: '',
				date: '',
				preUpper: '',
				proLower: '',
				chgUpper: '',
				chgLower: '',
				dealUpper: '',
				dealLoser: ''
			};
		},
		async send() {
			// 先上传表单数据 (不用改)
			let res1 = await sendSell(this.formData);
			// 上传表格结构（将来后台可以动态保存每个策略的表格到数据库，实现动态管理）
			let res2 = await sendList({
				id: res1.data.id,
				name: this.formData.name,
				table: [
					{
						label: '股票代码',
						prop: 'stockcode',
						sortable: false
					},
					{
						label: '股票名',
						prop: 'stockname',
						sortable: false
					},
					{
						label: '上市日期',
						prop: 'list_date',
						sortable: true
					},{
						label: '上市区域',
						prop: 'stockarea',
						sortable: false
					},{
						label: '前复权价',
						prop: 'pricavg',
						sortable: true
					},{
						label: '涨跌幅',
						prop: 'pctavg',
						sortable: true
					},{
						label: '成交额',
						prop: 'amountavg',
						sortable: true
					}
				]
			});
			
			if(res2.code){
				this.$message({
					message:"提交成功",
					type:"success"
				})
			}else{
				this.$message.error("提交失败")
			}
		}
	}
};
</script>

<style lang="less"></style>
